<template>
	<view>
		<view class="user-container bg-white my_user">
			<view class="userinfo" :style="{background: 'url('+topImg+') no-repeat center center'}" >
				<view class="wait" v-if="login">
					<view class="cu-avatar header-img round " @click="settingHeadImg()" :style="{ backgroundImage: 'url(' + headerImg + ')' }">
					</view>
					<view class="userinfo-nickname margin-top">
						<text class="username">{{ userName }}</text>
						<text class="userphone">{{ userPhone }}</text>
						<text class="userarea" @tap="_changeCommunity()">{{ communityName }} <text class="cuIcon-settings text-white margin-left-sm"></text></text>
					</view>
					<view class="text-right" @click="_viewUserQrCode">
						<text class="cuIcon-qrcode text-white margin-left" ></text>
					</view>
				</view>
				<view class="wait" v-else @tap="showLongModel">
					<!-- #ifdef MP-WEIXIN -->
					<view class="userinfo-avatar">
						<open-data type="userAvatarUrl" lang="zh_CN" />
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 || APP-PLUS -->
					<view class="cu-avatar header-img round " :style="{ backgroundImage: 'url(' + headerImg + ')' }">
					</view>
					<!-- #endif -->
					<view class="userinfo-nickname margin-top">
						<text>请登录</text>
					</view>
				</view>
			</view>
			<view class="money_box">
				<view class="money_item" @click="myAccount()">
					<view class="num">￥{{blance}}</view>
					<view class="name">余额</view>
				</view>
				<view class="line"></view>
				<view class="money_item">
					<view class="num">{{inter}}</view>
					<view class="name">积分</view>
				</view>
				<view class="line"></view>
				<view class="money_item" @click="coupons()">
					<view class="num">{{ka}}</view>
					<view class="name">卡劵</view>
				</view>
			</view>
		</view>
			<auth-owner-dialog ref="authOwnerDialogRef"></auth-owner-dialog>
	</view>
</template>

<script>
	import context from '@/lib/java110/Java110Context.js';
	const factory = context.factory; //获取app实例
	const constant = context.constant;
	import conf from '@/conf/config.js';
	import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
	import {queryOwnerAccount,queryUserIntegral} from '@/api/user/userApi.js';
	import {
		getCouponUsers
	} from '../../api/fee/feeApi.js';
	
	import {getCommunityId,getCommunityName}  from '../../api/community/communityApi.js';
	
	import {loadLoginOwner,getMemberId,hasAuthOwner} from '../../api/owner/ownerApi.js';
	import {getUserName,getUserTel} from '@/api/user/userApi.js';

	import authOwnerDialog from '@/components/owner/auth-owner-dialog.vue'
	export default {
		name: "my-person",
		data() {
			return {
				userInfo: {},
				headerImg: conf.imgUrl+'/h5/images/serve/head.png',
				topImg: conf.imgUrl+'/h5/images/serve/bg.png',
				userName: '',
				userPhone: '',
				communityName: '',
				blance: '0.00',
				inter: '0.00',
				ka: '0',
				ownerFlag: false, // 是否有业主信息 标记 如果有为 true  没有为false
				login: true,
			};
		},
		created() {
			this.refreshPageLoginInfo();
		},
		components: {
			authOwnerDialog
		},
		methods: {
		    //上传人脸
		    settingHeadImg: function() {
				var _that = this;
				wx.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						// console.log(res)
						wx.showToast({
							title: '正在上传',
							icon: 'loading',
							mask: true,
							duration: 1000
						});
						var tempFilePaths = res.tempFilePaths
						console.log('头像地址', tempFilePaths);
						TanslateImage.translate(this,tempFilePaths, (_baseInfo) => {
							_that.headerImg = _baseInfo;
							_that._uploadOwnerHeaderImg();
							wx.hideLoading()
						})
					}
				})
			},
			_uploadOwnerHeaderImg: function() {
				let _that = this;
				context.getOwner(function(_owner) {
					let _memberId = _owner.memberId;
					let _communityId = _owner.communityId;
					let obj = {
						memberId: _memberId,
						communityId: _communityId,
						photo: _that.headerImg
					};
					context.request({
						url: constant.url.uploadOwnerPhoto,
						header: context.getHeaders(),
						method: "POST",
						data: obj, //动态数据
						success: function(res) {
							console.log(res);
							if (res.statusCode != 200) {
								wx.showToast({
									title: '头像上传失败',
									icon: 'none',
									duration: 2000
								});
								return;
							}
							
							_that.loadOwnerHeaderImg();
						},
						fail: function(e) {
							wx.showToast({
								title: "服务器异常了",
								icon: 'none',
								duration: 2000
							});
						}
					});
				});
			
			},
			//切换小区
			_changeCommunity: function() {
				uni.navigateTo({
					url: "/pages/my/changeOwnerCommunity"
				});
			},
			refreshPageLoginInfo: function() {
				let _that = this; //查询用户信息
				if (!_that.ckeckUserInfo()) {
					_that.login = false;
					return;
				}
				_that.communityName = getCommunityName();
				_that.login = true;
				_that.userName = getUserName();
				_that.userPhone = getUserTel();
				_that.loadOwenrInfo();
				_that.userInfo = context.getUserInfo();
				this.loadOwnerHeaderImg();
				this.loadOwnerAccount();
				this.loadOwnerCoupon();
				this.loadUserIntegral();
			},
			ckeckUserInfo: function() {
				return context.checkLoginStatus();
			},
			loadOwenrInfo: function() {
				let _that = this;
				hasAuthOwner(this).then(_owner => {
					_that.ownerFlag = true;
				},()=>{
					_that.ownerFlag = false;
				});
			},
			/**
			 * 查询业主头像
			 */
			loadOwnerHeaderImg: function() {
				let _that = this;
				
				loadLoginOwner({
					memberId:getMemberId(),
					communityId:getCommunityId()
				}).then(_data=>{
					//console.log(_data);
					if(_data.faceUrl){
						_that.headerImg = _data.faceUrl;
					}else{
						_that.headerImg =conf.imgUrl+'/h5/images/serve/head.png';
					}
				})
			},
			// 余额
			loadOwnerAccount: function() {
				let _that = this;
				context.getOwner(function(_ownerInfo) {
					if (_ownerInfo) {
						queryOwnerAccount({
							page: 1,
							row: 20,
							idCard: _ownerInfo.idCard,
							link: _ownerInfo.ownerTel,
							communityId: _ownerInfo.communityId
						}).then((data) => {
							if (!data) {
								_that.accounts = [];
								_that.blance = 0
								return;
							}
							_that.accounts = data;
							let blanceSum = 0;
							_that.accounts.forEach((v, k) => {
								if(v.acctType == '2003'){
									blanceSum += parseFloat(v.amount);
								}
							})
							_that.blance = blanceSum.toFixed(2);
							
						})
					}
				});
			},
			loadOwnerCoupon: function() {
				let _that = this;
				let _count = 0;
				_that.ka = 0;
				context.getOwner(function(_ownerInfo) {
					if (_ownerInfo) {
						getCouponUsers({
							page: 1,
							row: 100,
							tel: _ownerInfo.ownerTel,
							communityId: _ownerInfo.communityId,
							state: '1001'
						}, null)
							.then((_couponList) => {
								_couponList.data.forEach(items => {
									if (items.isExpire == 'Y') {
										_count += parseInt(items.stock)
									}
								})
								_that.ka = _count;
							})
					}
				});
			},
			loadUserIntegral:function(){
				let _that =this;
				this.inter = 0;
				queryUserIntegral({
					page:1,
					row:1,
				}).then(_data=>{
					_that.inter = _data.integral
				})
			},
			showLongModel: function() {
				this.vc.navigateTo({
					url: '/pages/login/login'
				}, () => {
					this.refreshPageLoginInfo();
				});
			},
			// 我的钱包
			myAccount: function() {
				hasAuthOwner(this).then(_owner => {
					this.vc.navigateTo({
						url: '/pages/account/myAccount',
					});
				})
			},
			//优惠券
			coupons: function(_item) {
				this.vc.navigateTo({
					url: '/pages/coupon/myCoupons',
				})
			},
			_viewUserQrCode:function(){
				this.vc.navigateTo({
					url:'/pages/my/userQrCode'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my_user {
		padding: 0;
	}

	.header-img,
	.userinfo-avatar {
		width: 140upx;
		height: 140upx;
		margin-right: 20upx;
		background-color: #fff;
	}

	.userinfo {
		height: 280upx;
		//background: url('/static/images/serve/bg.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}


	.already,
	.wait {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		padding: 0 20%;
	}

	.userinfo-nickname {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		color: #fff;
		margin: 0 !important;
		height: 280upx;
	}

	.money_box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20upx 50upx;
		border-radius: 20upx;

		.money_item {
			text-align: center;
			color: #333;
			font-size: 28upx;
			padding: 10upx 0
		}

		.line {
			height: 20upx;
			width: 2upx;
			background: #eee;
		}
	}
	.cuIcon-qrcode{
		font-size: 48upx;
		
	}
</style>
